<template>
  <div class="roomtype">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0,'')">
          添加房间类型
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

        <el-form ref="formInline" :inline="true" :model="formInline" size="mini" class="demo-form-inline" style="padding: 2px 15px">


          <el-select v-model="value1"    placeholder="机构编号" style="padding-top: 5px; "   >
            <el-option
              v-for="item in options"
              :key="item.institutionNumber"

              :label="item.institutionName"
              :value="item.institutionNumber">
            </el-option>
          </el-select>



          <el-form-item>
            <el-button type="primary" @click="search(0,'')">条件查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
      <el-table
        ref="tableSort"

        :data="list"
        style="float: left"
        v-loading="listLoading"

      >





        <el-table-column
          show-overflow-tooltip
          prop="typeCode"
          label="房间编码"

        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="dailyFee"
          label="日费用"

        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="monthFee"
          label="月费用"

        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="typeName"
          label="房间类型"

        ></el-table-column>
        <el-table-column label="禁用状态" prop="disabled">
          <template slot-scope="scope">

            <el-switch
              v-model="scope.row.disabled"
              class="demo"
              active-color="#F04134"
              active-text="禁用"
              font-size="12px"
              inactive-color="#11CED2"
              inactive-text="启用"
              @change="switchChange(scope.$index, scope.row)"

            />

          </template>


        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="lastUpdator"
          label="最后操作人"

        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="操作"
          width="180px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="text"    @click="handleAdd(scope.$index, scope.row)">修改 <i class="el-icon-edit"></i></el-button>



          </template>
        </el-table-column>
      </el-table>
    </vab-query-form>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"
      destroy-on-close

    >
      <el-form ref="form" :model="form"  label-width="80px"  :rules="rules">
        <el-form-item label="机构名称" v-if="!isdisabled" required>
          <el-select   v-model="value"   placeholder="机构编号" style="padding-top: 5px;width: 350px "  @change="change">
            <el-option
              v-for="item in options"
              :key="item.institutionNumber"

              :label="item.institutionName"
              :value="item.institutionNumber">
            </el-option>

          </el-select>
          <span v-if="isdisabled">
             {{form.institutionName}}
          </span>

        </el-form-item>

        <el-form-item label="日费用"  prop="dailyFee">
          <el-input v-model="form.dailyFee" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="月费用"  prop="monthFee">
          <el-input v-model="form.monthFee" autocomplete="off" type="number"></el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="form.typeName" autocomplete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="Saveadd">确 定</el-button>
      </div>


    </el-dialog>

    <el-dialog
      title="护理等级详情"
      :visible.sync="dialogFormVisibles"
      width="500px"

    >

      <el-table
        ref="tableSort"

        :data="listInfo"
        v-loading="listLoading"


      >

        <el-table-column
          show-overflow-tooltip
          label="机构名称"
          prop="institutionName"
        ></el-table-column>

        <el-table-column
          show-overflow-tooltip
          label="等级名称"
          prop="levelName"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="levelCode"
          label="护理编码"

        ></el-table-column>
        <el-table-column label="禁用状态" prop="gender">
          <template slot-scope="scope">
            <span v-if="scope.row.disabled==false">启用</span>
            <span v-if="scope.row.disabled==true">禁用</span>
          </template>
        </el-table-column>







      </el-table>

    </el-dialog>
  </div>
</template>

<script>
  import { add } from "@/api/roomtype";
  import { search } from "@/api/roomtype";
  import { disable } from "@/api/roomtype";
  import { enable } from "@/api/roomtype";
  import { revise } from "@/api/roomtype";
    export default {
        name: "Roomtype",
         data() {
        return {
          options: "",
          formInline:{

          },
          id:0,
          isdisabled:false,
          list:[],
          listInfo:[],
          value1:'',
          listLoading:true,
          value: '',
          dialogFormVisibles:false,
          dialogFormVisible:false,
          // listLoading: true,
            rules:

                {
                    dailyFee: [
                        { required: true, message: '日费用', trigger: 'blur' },

                    ],
                    monthFee: [
                        { required: true, message: '月费用', trigger: 'blur' },

                    ],
                    typeName: [
                        { required: true, message: '类型名称', trigger: 'blur' },

                    ],
                },
          form:{
            institutionNumber:"",
            dailyFee:"",
            monthFee:"",
            typeName:"",

          },
          title:"添加房间类型",

        }


      },
      created() {
        this.value=localStorage.getItem("institutionNumber")
        this.value1=localStorage.getItem("institutionNumber")
          setTimeout(() => {
              this.options= JSON.parse(localStorage.getItem("childinstitutionNumber"));
          }, 500);

        this.form.institutionNumber=localStorage.getItem("institutionNumber")
          setTimeout(() => {
              this.search()

          },1000)

      },
      methods:{
         handleAdd(id,data) {

           this.id = data.id
           console.log(this.id)



           this.dialogFormVisible=true
           if(this.id>0){

             this.title="修改房间类型"
             this.isdisabled = true
             this.form.disabled = true
               this.form.typeCode=data.typeCode
               this.form.typeName=data.typeName
               this.form.monthFee=data.monthFee
               this.form.dailyFee=data.dailyFee

           }else {


             this.title="添加房间类型"
             this.isdisabled = false
             this.form.dailyFee=""
             this.form.monthFee=""
             this.form.typeName=""
             // this.form={
             //
             //     dailyFee:"",
             //     monthFee:"",
             //     typeName:"",
             //
             // }
           }
         },
        change(value){
          this.form.institutionNumber=value
        },
        Saveadd(){
          this.$refs['form'].validate(async (valid) => {
            if (valid) {
              if(this.id>0){

                const {code} = await revise(this.form);

                if(code==200){
                  this.$baseMessage("修改成功",'success');
                  this.dialogFormVisible=false
                    this.search()

                }else {
                  return false
                }
              }else{

                const {code,data} = await add(this.form);
                console.log(data)
                if(code==200){
                  this.$baseMessage("添加成功",'success');
                  this.dialogFormVisible=false

                 this.search()
                }else {
                  return false
                }
              }


            }
          });
        },
        search(id,data){
          this.id = id
          this.listLoading = true;
          console.log(this.id)
          if(this.id==undefined){

            var institutionNumber= localStorage.getItem("institutionNumber")
              console.log(institutionNumber)
          }else {
            var institutionNumber= this.value1
          }

          search({institutionNumber}).then(res =>{
            console.log(res.data)
            this.list=res.data

            setTimeout(() => {
              this.listLoading = false;
            }, 500);
          })
        },
        switchChange(index,row){
              if(row.disabled){
                console.log(row.typeCode)
                  let  typeCode=row.typeCode
                  disable({typeCode}).then(res =>{
                      console.log(res)
                      if(res.code==200){
                          this.$baseMessage("已禁用",'success');

                      }else {

                      }

                      setTimeout(() => {
                          this.listLoading = false;
                      }, 500);
                  })

              }else {
                  let  typeCode=row.typeCode
                  enable({typeCode}).then(res =>{
                      console.log(res)
                      if(res.code==200){
                          this.$baseMessage("已启用",'success');

                      }else {

                      }

                      setTimeout(() => {
                          this.listLoading = false;
                      }, 500);
                  })
              }
            console.log(row)

        },
        close(){
          this.dialogFormVisible=false
        }
       }
    }
</script>

<style scoped>
  .roomtype >>> .demo .el-switch__label {
    position: absolute !important;
    display: none !important;
    color: #fff !important;
  }
  .roomtype >>>.el-switch__core{
    width: 50px !important;
  }
  /*打开时文字位置设置*/
  .roomtype >>> .demo .el-switch__label--right {
    z-index: 1 !important;

  }
  /*关闭时文字位置设置*/
  .roomtype >>> .demo .el-switch__label--left {
    z-index: 1 !important;
    left: 19px !important;
    margin-right: 0px !important;
  }
  /*table-room*/
  .roomtype >>> .demo .el-switch__label.is-active {
    display: block !important;
  }
  .roomtype >>> .demo.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important !important;
  }
  .roomtype >>> .demo .el-switch__label.is-active span{
    font-size: 12px !important;
  }
</style>
